<template>
  <div class="dashboard-container">
    <h1 style="text-align: center">房间类型管理</h1>

    <el-dialog
      title="新增"
      :visible.sync="addButtonController"
      width="50%"
      @close="closeRoomType('ruleForm')"
    >
      <el-form label-width="20%" :model="addOrUpdateList" :rules="roomTypes" ref="ruleForm">
        <el-form-item label="房间类型名称" prop="roomTypeName">
          <el-input v-model="addOrUpdateList.roomTypeName" maxlength="20" show-word-limit style="width: 80%" clearable
                    placeholder="请输入房间类型名称"
          />
        </el-form-item>
        <el-form-item label="房间价格" prop="roomPrice">
          <el-input v-model="addOrUpdateList.roomPrice"  show-word-limit style="width: 80%" clearable
                    placeholder="请输入房间价格"
          />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="addOrUpdateList.remark" maxlength="100" show-word-limit style="width: 80%" clearable
                    placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="addRoomType('ruleForm')">确 定</el-button>
    <el-button @click="closeRoomType('ruleForm')">取 消</el-button>
  </span>
    </el-dialog>
    <el-button plain
               style="width:80px;margin-bottom:30px;margin-left:18% ;background-color: #cfefc6; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);"
               @click="addButton" v-if="roleName=='管理员'"
    >
      新增
    </el-button>

    <el-dialog
      :visible.sync="updateButtonController"
      title="修改"
      width="50%"
      @close="closeRoomType('ruleForm')"
    >
      <el-form label-width="20%" :model="addOrUpdateList" :rules="roomTypes" ref="ruleForm">
        <el-form-item label="房间类型名称" prop="roomTypeName">
          <el-input v-model="addOrUpdateList.roomTypeName" maxlength="11" show-word-limit style="width: 80%" clearable
                    placeholder="请输入房间类型名称"
          />
        </el-form-item>
        <el-form-item label="房间价格" prop="roomPrice">
          <el-input v-model="addOrUpdateList.roomPrice" maxlength="8" show-word-limit style="width: 80%" clearable
                    placeholder="请输入房间价格"
          />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="addOrUpdateList.remark" maxlength="100" show-word-limit style="width: 80%" clearable
                    placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="updateRoomType('ruleForm')">确 定</el-button>
    <el-button @click="closeRoomType('ruleForm')">取 消</el-button>

  </span>
    </el-dialog>
    <el-dialog
      :visible.sync="deleteButtonController"
      title="您确认要删除吗？"
      width="30%"
      @close="closeDelete('ruleForm')"
    >
      <el-form ref="ruleForm" :model="deleteRoomTypeId" label-width="20%"></el-form>

      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="deleteRoomType('ruleForm')">确 定</el-button>
    <el-button @click="closeDelete('ruleForm')">取 消</el-button>
  </span>
    </el-dialog>

    <el-input
      v-model="roomPrice"
      placeholder="房间价格"
      name="username"
      type="text"
      clearable
      style="margin-left:40px ;width: 180px"
    />

    <el-input
      v-model="roomTypeName"
      placeholder="房间类型名称"
      name="username"
      type="text"
      clearable
      style="margin-left:40px ;width: 180px"
    />

    <el-button plain
               style="width:80px;margin-bottom:30px;margin-left:40px ;background-color: #cfefc6; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);"
               @click="selectAll"
    >
      查询
    </el-button>
    <el-button
      style="width:80px;margin-bottom:30px;margin-left:40px ;background-color: white; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);"
      @click="checkRoomType"
    >重置
    </el-button>
    <el-table :data="roomTypeList.slice((currentPage-1)*pagesize,currentPage*pagesize)" height="610px" border style="width: 100%;margin-top: 20px"
              class="elegant-room-table"
    >
      <el-table-column align="center" fixed prop="roomTypeId" label="房间类型ID" width="150"/>
      <el-table-column align="center" fixed prop="roomTypeName" label="房间类型名称" width="180"/>
      <el-table-column align="center" fixed prop="roomPrice" label="房间价格" width="150">
        <template v-slot="scope">
          <span class="price-tag">¥{{ scope.row.roomPrice }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed prop="remark" label="备注" min-width="200"/>
      <el-table-column align="center" fixed label="操作" width="180">
        <template v-slot="scope">
          <el-button size="mini" v-if="roleName=='管理员'" round icon="el-icon-edit" @click="updateButton(scope.row)"></el-button>
          <el-button size="mini" v-if="roleName=='管理员'"  round icon="el-icon-delete" @click="deleteButton(scope.row)"></el-button>
        </template>
      </el-table-column>

    </el-table>
    <div style="margin-top:5px;margin-left: 30%;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10,15,20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="roomTypeList.length">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { deleteRoomType, insert1RoomType, selectAllRoomType, updateRoomType } from '@/api/roomType'

export default {
  name: 'user',
  computed: {
    ...mapGetters([
      'userId',
      'userName',
      'roleName'
    ])
  },
  data() {
    return {
      roomPrice: '',
      roomTypeName: '',
      roomTypeList: [],
      addButtonController: false,
      updateButtonController: false,
      deleteButtonController: false,
      deleteRoomTypeId: '',
      currentPage: 1,
      currentIndex: '',
      pagesize: 10,
      addOrUpdateList: {
        // roomTypeTableId: '',
        // roomTypeId: '',
        roomTypeName: '',
        roomPrice: '',
        remark: ''
      },
      roomTypes: {
        roomTypeName: [
          {required: true, trigger: 'blur', message: '房间名称不能为空'},
          {min: 1, max: 20, message: '请输入房间名称', trigger: 'blur'}
        ],
        roomPrice: [
          {required: true, trigger: 'blur', message: '价格不能为空'},
          {min: 1, max: 9, message: '房间价格只能8位数或8位数以内', trigger: 'blur'}
        ]
      },
    }
  },
  mounted() {
    this.selectAll()
  },
  methods: {
    handleSizeChange(val) {
      this.pagesize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage= val
    },
    selectAll() {

      selectAllRoomType({
        roomPrice: this.roomPrice,
        roomTypeName: this.roomTypeName
      }).then(
        response => {
          console.log(response.data)
          this.roomTypeList = response.data
          if((this.roomTypeList.slice((this.currentPage-1)*this.pagesize,this.currentPage*this.pagesize)).length == 0){
            this.currentPage = 1
          }
        }
      )
    },
    addButton() {
      if (this.roleName !== '管理员') {
        this.$message.warning('您不是管理员，无法使用本功能');
        return;
      }
      this.addOrUpdateList = {
        roomTypeTableId: '',
        roomTypeId: '',
        roomTypeName: '',
        roomPrice: '',
        remark: ''
      }
      this.addButtonController = true
    },
    updateButton(row) {
      if (this.roleName !== '管理员') {
        this.$message.warning('您不是管理员，无法使用本功能');
        return;
      }
      this.addOrUpdateList = {
        roomTypeTableId: row.roomTypeTableId,
        roomTypeId: row.roomTypeId,
        roomTypeName: row.roomTypeName,
        roomPrice: ''+row.roomPrice,
        remark: row.remark
      }
      this.updateButtonController = true
    },
    deleteButton(row) {
      if (this.roleName !== '管理员') {
        this.$message.warning('您不是管理员，无法使用本功能');
        return;
      }
      this.deleteRoomTypeId = row.roomTypeId
      this.deleteButtonController = true
    },
    addRoomType(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          insert1RoomType({
            // roomTypeTableId: this.addOrUpdateList.roomTypeTableId,
            // roomTypeId: this.addOrUpdateList.roomTypeId,
            roomTypeName: this.addOrUpdateList.roomTypeName,
            roomPrice: this.addOrUpdateList.roomPrice,
            remark: this.addOrUpdateList.remark
          }).then(
            response => {
              this.addButtonController = false
              this.$message.success('新增成功！')
              this.selectAll()
            }
          )
        } else {
          return false
        }
      })
    },
    updateRoomType(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateRoomType({
            roomTypeTableId: this.addOrUpdateList.roomTypeTableId,
            roomTypeId: this.addOrUpdateList.roomTypeId,
            roomTypeName: this.addOrUpdateList.roomTypeName,
            roomPrice: this.addOrUpdateList.roomPrice,
            remark: this.addOrUpdateList.remark
          }).then(
            response => {
              this.updateButtonController = false
              this.$message.success('更新成功！')
              this.selectAll()
            }
          )

        } else {
          return false
        }
      })
    },
    deleteRoomType() {
      deleteRoomType({
        roomTypeId: this.deleteRoomTypeId
      }).then(
        async response => {
          this.deleteButtonController = false
          this.$message.success('删除成功！')
          this.selectAll()
        }
      )
    },
    checkRoomType() {
      this.roomPrice = ''
      this.roomTypeName = ''
      this.selectAll()
    },
    closeRoomType(formName) {
      this.$refs[formName].resetFields()
      this.addButtonController = false
      this.updateButtonController = false
    },
    closeDelete() {
      this.deleteButtonController = false
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.elegant-room-table {
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  overflow: hidden;

  &::before {
    display: none;
  }

  .price-tag {
    display: inline-block;
    padding: 3px 8px;
    color: #171717;
    border-radius: 12px;
    font-weight: 500;
  }
}
</style>
